<template>
  <el-container class="layout classic">
    <el-header>
      <div class="header-lf">
        <div class="logo flx-center">
          <img src="@/assets/images/logo-header.png" alt="logo" />
        </div>
        <div class="name">{{ userInfo.schoolName }}</div>
      </div>
      <ToolBarRight></ToolBarRight>
    </el-header>
    <el-container class="classic-content">
      <el-aside>
        <div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }">
          <el-scrollbar>
            <el-menu :default-active="activeMenu" :router="false" :collapse="isCollapse" :collapse-transition="false"
              :unique-opened="false" background-color="#ffffff" text-color="#303133">
              <SubMenu :menuList="menuList" />
            </el-menu>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-container class="classic-main">
        <Main />
      </el-container>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { GlobalStore } from "@/stores";
import { useRoute } from "vue-router";
import { AuthStore } from "@/stores/modules/auth";
import Main from "@/layouts/components/Main/index.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
const route = useRoute();
const authStore = AuthStore();
const globalStore = GlobalStore();
const userInfo = computed(() => globalStore.userInfo)
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path));
const menuList = computed(() => authStore.showMenuListGet);
const isCollapse = computed(() => globalStore.themeConfig.isCollapse);
</script>
<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;

  .el-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    padding: 0 15px 0 0;
    background-color: #2c3146;
    border-bottom: 1px solid #f1f1f1;

    .header-lf {
      display: flex;
      align-items: center;
      overflow: hidden;
      white-space: nowrap;

      .logo {
        flex-shrink: 0;
        margin-left: 24px;

        span {
          font-size: 15px;
          color: #fff;
          white-space: nowrap;
        }

        img {
          height: 60px;
          object-fit: contain;
          margin-right: 10px;
        }
      }
    }
    .name {
      font-size: 14px;
      color: #fff;
      margin-left: -8px;
      padding-top: 15px;
    }
    :deep(.tool-bar-lf) {
      color: #ffffff;

      .el-breadcrumb__inner.is-link {
        color: #e5eaf3;

        &:hover {
          color: var(--el-color-primary);
        }
      }

      .el-breadcrumb__item:last-child .el-breadcrumb__inner,
      .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
        color: #cfd3dc;
      }
    }

    :deep(.tool-bar-ri) {

      .toolBar-icon,
      .username {
        color: #e5eaf3;
      }
    }
  }

  .el-aside {
    width: auto;
    overflow: inherit;
    background-color: #ffffff;
    border-right: 1px solid var(--el-border-color);
    transition: all 0.3s ease;

    .menu {
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: all 0.3s ease;

      .el-menu {
        overflow-x: hidden;
        border-right: none;
      }
    }
  }
}
</style>
<style lang="scss">
.classic {
  .classic-content {
    height: calc(100% - 55px); // 减去头部高度

    .classic-main {
      display: flex;
      flex-direction: column;
    }
  }

  .el-menu,
  .el-menu--popup {
    .el-menu-item {
      &.is-active {
        background: var(--el-color-primary-light-9);

        &::before {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 4px;
          content: "";
          background: var(--el-color-primary);
        }
      }
    }
  }
  // guide
  #driver-highlighted-element-stage {
    background-color: #606266 !important;
  }
}
</style>